<template>
<div class="envelope-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">活动设置</div>
        <div class="wlm-form-content">
            <el-form :disabled="$hasFormEnd" ref="base" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                <el-form-item label="活动名称" prop="name">
                    <el-input v-model.trim="formFormatData.formData.name">
                    </el-input>
                </el-form-item>
                <el-form-item label="活动时间" prop="time">
                    <el-date-picker :disabled="$hasFormEdit" style="width:360px;" :picker-options="afterOptions" v-model="formFormatData.formData.time" :default-time="[`${`${new Date().getHours()}`.padStart(2,'0')}:${`${new Date().getMinutes()+2}`.padStart(2,'0')}:00`,'23:59:59']" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动渠道" prop="channel">
                    <el-checkbox-group v-model="formFormatData.formData.channel">
                      <el-checkbox label="2" v-if="JSON.stringify($store.getters.power).indexOf('wxapp')>-1">微信小程序</el-checkbox>
                  <el-checkbox label="3" v-if="JSON.stringify($store.getters.power).indexOf('H5')>-1">H5</el-checkbox>
                  <el-checkbox label="4" v-if="JSON.stringify($store.getters.power).indexOf('wechat')>-1">微信公众号</el-checkbox>
                  <el-checkbox label="7" v-if="JSON.stringify($store.getters.power).indexOf('aliapp')>-1">支付宝小程序</el-checkbox>
                  <el-checkbox label="9" v-if="JSON.stringify($store.getters.power).indexOf('toutiaoapp')>-1">抖音-头条</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="wlm-form">
        <div class="wlm-form-header">活动内容</div>
        <div class="wlm-form-content">
            <el-form :disabled="$hasFormEnd" ref="info" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                <el-form-item label="活动形式">
                    <el-radio-group v-model="formFormatData.formData.type" :disabled="$hasFormEdit">
                        <el-radio :label="10">瓜分模式</el-radio>
                        <el-radio :label="20">裂变模式</el-radio>
                    </el-radio-group>
                    <p class="form-help">瓜分模式：所有人一起瓜分固定金额的优惠券，裂变模式：邀请指定数量的好友获得优惠券</p>
                </el-form-item>
                <el-form-item label="优惠券总量" v-if="!isDivide" prop="">
                    <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                        <el-input-number @change="newGiftChange(formFormatData.formData,'total_num')" :controls="false" :min="0" v-model="formFormatData.formData.total_num"></el-input-number>
                        <div class="wlm-input-append append-right">份</div>
                        <div class="wlm-input-append append-left">需邀请</div>
                        <el-input-number @change="newGiftChange(formFormatData.formData,'invitation_num')" :disabled="$hasFormEdit" :controls="false" :min="1" v-model="formFormatData.formData.invitation_num"></el-input-number>
                        <div class="wlm-input-append append-right">人</div>
                    </div>
                </el-form-item>
                <el-form-item label="邀请有效期">
                    <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                        <el-input-number @change="newGiftChange(formFormatData.formData.share_time,'0')" :disabled="$hasFormEdit" :controls="false" :min="0" v-model="formFormatData.formData.share_time[0]"></el-input-number>
                        <div class="wlm-input-append append-right">天</div>
                        <el-input-number @change="newGiftChange(formFormatData.formData.share_time,'1')" :disabled="$hasFormEdit" :controls="false" :min="0" :max="24" v-model="formFormatData.formData.share_time[1]"></el-input-number>
                        <div class="wlm-input-append append-right">时</div>
                        <el-input-number @change="newGiftChange(formFormatData.formData.share_time,'2')" :disabled="$hasFormEdit" :controls="false" :min="0" :max="60" v-model="formFormatData.formData.share_time[2]"></el-input-number>
                        <div class="wlm-input-append append-right">分</div>
                    </div>
                </el-form-item>
                <el-form-item :label="isDivide?'瓜分方式':'优惠券形式'">
                    <el-radio-group v-model="formFormatData.formData.share_type" :disabled="$hasFormEdit">
                        <el-radio :label="10">{{isDivide?'好友均分（每人领取金额相同）':'固定金额'}}</el-radio>
                        <el-radio :label="20">{{isDivide?'拼手气（每人领取金额随机）':'拼手气'}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="瓜分总量" v-if="isDivide" prop="total_num">
                    <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                        <el-input-number @change="newGiftChange(formFormatData.formData,'total_num')" :disabled="$hasFormEdit" :controls="false" :min="0" v-model="formFormatData.formData.total_num"></el-input-number>
                        <div class="wlm-input-append append-right">份</div>
                    </div>
                </el-form-item>
                <!-- 2 -->
                <el-form-item label="瓜分内容" v-if="isDivide" prop="share_content">
                    <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                        <el-input-number @change="newGiftChange(formFormatData.formData.share_content,'0')" :disabled="$hasFormEdit" :controls="false" :min="3" v-model="formFormatData.formData.share_content[0]"></el-input-number>
                        <div class="wlm-input-append append-right">人</div>
                        <div class="wlm-input-append append-left">瓜分</div>
                        <el-input-number @change="newGiftChange(formFormatData.formData.share_content,'1')" :disabled="$hasFormEdit" :controls="false" :min="0" v-model="formFormatData.formData.share_content[1]"></el-input-number>
                        <div class="wlm-input-append append-right">元</div>
                    </div>
                    <p class="form-help">推荐至少3人起瓜分优惠券，避免无法产生足够的裂变效果</p>
                </el-form-item>
                <el-form-item label="优惠内容" v-if="!isDivide&&formFormatData.formData.share_type==10" prop="share_content_one">
                    <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                        <div class="wlm-input-append append-left">减免</div>
                        <el-input-number @change="newGiftChange(formFormatData.formData.share_content,'0',0.01)" :disabled="$hasFormEdit" :controls="false" :min="0" v-model="formFormatData.formData.share_content[0]"></el-input-number>
                        <div class="wlm-input-append append-right">元</div>
                    </div>
                </el-form-item>
                <el-form-item label="优惠内容" v-if="!isDivide&&formFormatData.formData.share_type==20" prop="share_content">
                    <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox envelope-input-number">
                        <div class="wlm-input-append append-left">范围内随机</div>
                        <el-input-number @change="newGiftChange(formFormatData.formData.share_content,'0',0.01)" :disabled="$hasFormEdit" :controls="false" :min="0" v-model="formFormatData.formData.share_content[0]"></el-input-number>
                        <div class="wlm-input-append append-right">至</div>
                        <el-input-number @change="newGiftChange(formFormatData.formData.share_content,'1',0.01)" :disabled="$hasFormEdit" :controls="false" :min="0" v-model="formFormatData.formData.share_content[1]"></el-input-number>
                        <div class="wlm-input-append append-right">元</div>
                    </div>
                </el-form-item>
                <!-- 2 -->
                <el-form-item label="可用券商品">
                    <el-radio-group v-model="formFormatData.formData.is_goods_use" :disabled="$hasFormEdit">
                        <el-radio :label="10">全部商品</el-radio>
                        <el-radio :label="20">部分商品</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择商品" v-if="formFormatData.formData.is_goods_use==20">
                    <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="filtersChange"></choose-goods>
                    <el-button type="primary" style="margin-bottom:20px;" @click="goodsToogle">添加商品</el-button>
                    <el-table v-if="formFormatData.formData.goods!=''" :data="formFormatData.formData.goods" style="width: 100%">
                        <el-table-column prop="date" label="商品">
                            <template slot-scope="scope">
                                <div class="flex-row">
                                    <img class="logo" v-if="scope.row.image && scope.row.image" :src="scope.row.image[0]['file_path']">
                                    <div class="inner-text">
                                        <p>{{scope.row.goods_name}}</p>
                                        <span>￥:{{scope.row.goods_price}}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="date" label="库存">
                            <template slot-scope="scope">
                                <p>{{scope.row.stock_num}}</p>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <div class="operation-group">
                                    <el-button class="wlm-text" type="text" @click="deleteTable(scope)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="可用商品详情">
                    <el-radio-group v-model="formFormatData.formData.is_show">
                        <el-radio :label="10">不显示活动</el-radio>
                        <el-radio :label="20">显示活动</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="可用券时间">
                    <el-radio-group @change="$refs[`info`].validateField('available_time10')" v-model="formFormatData.formData.available_type" class="wlm-form-group flex-col no-top">
                        <el-radio :label="10">
                            <el-form-item class="inline" label="" label-width="0" prop="available_time10" :rules="[{ required: (formFormatData.formData.available_type === 10), message: '请选择使用时间', trigger: 'blur' }]">
                                <el-date-picker :default-time="[`${`${new Date().getHours()}`.padStart(2,'0')}:${`${new Date().getMinutes()}`.padStart(2,'0')}:00`,'23:59:59']" :picker-options="afterOptions" v-model="formFormatData.formData.available_time10" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-radio>
                        <el-radio :label="20">
                            成功参与当日起
                            <el-form-item class="inline" label="" label-width="0" prop="available_time20" :rules="[{ required: (formFormatData.formData.available_type === 20), message: '请选择使用时间', trigger: 'blur' }]">
                                <el-input-number @change="newGiftChange(formFormatData.formData,'available_time20')" :disabled="$hasFormEdit" :controls="false" :min="1" v-model="formFormatData.formData.available_time20"></el-input-number>
                            </el-form-item>
                            天内可用
                        </el-radio>
                        <el-radio :label="30">
                            成功参与次日起
                            <el-form-item class="inline" label="" label-width="0" prop="available_time30" :rules="[{ required: (formFormatData.formData.is_distribution === 30), message: '请选择使用时间', trigger: 'blur' }]">
                                <el-input-number @change="newGiftChange(formFormatData.formData,'available_time30')" :disabled="$hasFormEdit" :controls="false" :min="1" v-model="formFormatData.formData.available_time30"></el-input-number>
                            </el-form-item>
                            天内可用
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用券门槛">
                    <el-radio-group v-model="formFormatData.formData.rule" class="wlm-form-group flex-col">
                        <el-radio :label="10">无使用门槛</el-radio>
                        <el-radio :label="20">
                            订单满
                            <el-form-item class="inline" label="" label-width="0" prop="rule_order_money" :rules="[{ required: (formFormatData.formData.rule === 20), message: '请输入金额', trigger: 'blur' }]">
                                <el-input-number @change="newGiftChange(formFormatData.formData,'rule_order_money',0.01)" :disabled="$hasFormEdit" :controls="false" :min="0" v-model="formFormatData.formData.rule_order_money"></el-input-number>
                            </el-form-item>
                            元
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="每人限参与次数">
                    <el-radio-group v-model="formFormatData.formData.is_limit" class="wlm-form-group flex-col">
                        <el-radio :label="10">不限制次数</el-radio>
                        <el-radio :label="20">
                            <el-form-item class="inline" label="" label-width="0" prop="limit_num" :rules="[{ required: (formFormatData.formData.is_limit === 20), message: '请输入参与次数', trigger: 'blur' }]">
                                <el-input-number @change="newGiftChange(formFormatData.formData,'limit_num')" :disabled="$hasFormEdit" :controls="false" :min="1" v-model="formFormatData.formData.limit_num"></el-input-number>
                            </el-form-item>
                            次
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="领取后首页显示">
                    <el-radio-group v-model="formFormatData.formData.is_page">
                        <el-radio :label="10">不展示</el-radio>
                        <el-radio :label="20">展示</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="wlm-form">
        <div class="wlm-form-header">高级设置</div>
        <div class="wlm-form-content table-content">
            <el-form :disabled="$hasFormEnd" ref="vip" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                <el-form-item label="活动背景">
                    <el-radio-group v-model="formFormatData.formData.activity_back">
                        <el-radio :label="10">默认背景</el-radio>
                        <el-radio :label="20">自定义背景</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="背景图片" prop="merchantlog" ref="merchantlog" v-if="formFormatData.formData.activity_back==20">
                    <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">推荐尺寸：750X750，尺寸不匹配时，图片将选取部分展示</div>
                </el-form-item>
                <el-form-item label="活动分享卡">
                    <el-radio-group v-model="formFormatData.formData.activity_share">
                        <el-radio :label="10">默认分享卡</el-radio>
                        <el-radio :label="20">自定义分享卡</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分享图片" ref="businessbackgroundmap" v-if="formFormatData.formData.activity_share==20">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">推荐尺寸：750X750，尺寸不匹配时，图片将选取部分展示</div>
                </el-form-item>
                <el-form-item label="">
                    <div class="flex-col">
                        <el-checkbox :true-label="20" :false-label="10" v-model="formFormatData.formData.is_custom">自定义分享文案</el-checkbox>
                    </div>
                </el-form-item>
                <el-form-item label="" prop="custom_share_content" v-if="formFormatData.formData.is_custom==20">
                    <el-input  :maxlength="20" placeholder="输入4-20个字的分享文案" v-model="formFormatData.formData.custom_share_content">
                    </el-input>
                </el-form-item>
                <el-form-item label="推荐商品">
                    <el-radio-group v-model="formFormatData.formData.is_recommend">
                        <el-radio :label="10">最新上架</el-radio>
                        <el-radio :label="20">销量最高</el-radio>
                        <el-radio :label="30">自定义</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 高级设置！！！！！！！！！！！！！！！！！ -->
                <el-form-item label="选择商品" class="goods-table-box" v-show="formFormatData.formData.is_recommend==30">
                    <choose-goods ref="chooseVipGoods" :config="chooseVipGoodsConfig" :changeEvt="vipFiltersChange"></choose-goods>
                    <el-button type="primary" @click="vipGoodsToogle">添加商品</el-button>
                    <p class="form-help">最多可选择8个商品，拖拽商品可以排序</p>
                    <el-table class="goods-table" v-show="formFormatData.formData.recommend_goods!=''" :data="formFormatData.formData.recommend_goods" style="width: 100%">
                        <el-table-column prop="date" label="拖拽" min-width="20">
                            <template slot-scope="scope">
                                <i class="el-icon-rank"></i>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="商品">
                            <template slot-scope="scope">
                                <div class="flex-row">
                                    <img class="logo" v-if="scope.row.image && scope.row.image" :src="scope.row.image[0]['file_path']">
                                    <div class="inner-text">
                                        <p>{{scope.row.goods_name}}</p>
                                        <span>￥:{{scope.row.goods_price}}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="date" label="库存">
                            <template slot-scope="scope">
                                <p>{{scope.row.stock_num}}</p>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <div class="operation-group">
                                    <el-button class="wlm-text" type="text" @click="vipDeleteTable(scope)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="红包使用规则">
                    <ueditor :ueditorChange="serverInfoChange" :defaultMsg='defaultMsg' :config='{initialFrameWidth: null,initialFrameHeight: 350}' ref="by_know"></ueditor>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveForm" type="primary" :loading="loading">保存</el-button>
        <router-link tag="span" to="/application/envelope">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import ChooseGoods from '@/components/ChooseGoods/index'
import ChooseFiles from '@/components/ChooseFiles/index'
import ueditor from '@/components/Ueditor/index'
import Sortable from 'sortablejs'
import {
  redEnvelopesAddOrEdit,
  editGetRedEnvelopesData
} from '@/api/application'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'EnvelopeAdd',
  components: {
    ChooseGoods,
    ChooseFiles,
    ueditor
  },
  created() {
    this.$nextTick(() => {
      this.goodsListGrag()
    })
  },
  computed: {
    getPath() {
      return function(path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/custorm_style/${path}`)
      }
    },
    isDivide() {
      return this.formFormatData.formData.type === 10
    },
    $hasFormEdit() {
      return this.isFormEdit && this.formFormatData.formData.status !== 1
    },
    $hasFormEnd() {
      return this.isFormEdit && this.formFormatData.formData.status === 3
    }
  },
  data() {
    var checkArr = (rule, value, callback) => {
      const val = this.formFormatData.formData[rule.bindKey]
      const { message } = rule
      console.log(val, 'xx')
      if (!Array.isArray(val) || val[0] === undefined || val[1] === undefined) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    var checkArrOne = (rule, value, callback) => {
      const val = this.formFormatData.formData[rule.bindKey]
      const { message } = rule
      console.log(val, 'xx')
      if (!Array.isArray(val) || val[0] === undefined) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    return {
      loading:false,
      $index: -1,
      defaultMsg: '',
      imgPath: '',
      newGoodsList: [],
      oldGoodsList: [],
      currentRow: [],
      currentRow2: [],
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'back_image_id',
          model: 'img',
          validateField: 'merchantlog'
        }
      },
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'share_image_id',
          model: 'img'
        }
      },
      chooseGoodsConfig: {
        type: ['chooseGoods'],
        model: 'normal',
        initList: []
      },
      chooseVipGoodsConfig: {
        type: ['chooseVipGoods'],
        model: 'normal',
        initList: []
      },
      platformConfig: {
        type: ['image'],
        initList: [],
        isMore: false,
        bindKey: {
          key: 'image',
          model: 'img'
        }
      },
      chooseData: [],
      formFormatData: {
        key: ['base', 'info', 'vip'],
        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: editGetRedEnvelopesData,
            params: {
              id: ''
            },
            filters: {
              choose: {
                bindInit: ['chooseGoodsConfig', 'chooseVipGoodsConfig']
              },
              img: {
                bindInit: ['chooseLogoConfig', 'chooseBgConfig']
              }
            }
            // redirect: 'category_id'
          },
          submitForm: redEnvelopesAddOrEdit
        },
        formData: {
          name: '',
          status: '',
          type: 10,
          share_time: [0, 0, 0],
          share_type: 10,
          total_num: '',
          share_content: [],
          invitation_num: '',
          is_goods_use: 10,
          is_show: 10,
          is_page: 10,
          available_type: 10,
          available_time10: '',
          available_time20: '1',
          available_time30: '1',
          rule: 10,
          rule_order_money: '',
          is_limit: 10,
          use_rule: '',
          limit_num: '1',
          activity_back: 10,
          back_image_id: [],
          activity_share: 10,
          share_image_id: [],
          is_custom: 10,
          custom_share_content: '',
          is_recommend: 10,
          recommend_goods: [],
          time: [],
          channel: [],
          is_distribution: 1,
          goods: []
        },
        rules: {
          name: [{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }],
          total_num: [{
            required: true,
            message: '请输入瓜分总量',
            trigger: 'blur'
          }],
          share_content: [{
            required: true,
            message: '请填写完整~!',
            validator: checkArr,
            bindKey: 'share_content',
            trigger: 'change'
          }],
          share_content_one: [{
            required: true,
            message: '请填写完整~!',
            validator: checkArrOne,
            bindKey: 'share_content',
            trigger: 'change'
          }],
          time: [{
            required: true,
            message: '请选择活动时间',
            trigger: 'blur'
          }],
          custom_share_content: [{
            required: true,
            message: '请输入自定义分享文案',
            trigger: 'blur' },
          { min: 4,
            max: 20,
            message: '长度在 4 到 20 个字符',
            trigger: 'blur'
          }],
          channel: [{
            required: true,
            message: '请选择渠道',
            trigger: 'blur'
          }],
          available_time10: [{
            required: true,
            message: '请输入时间',
            trigger: 'blur'
          }],
          available_time20: [{
            required: true,
            message: '请输入时间',
            trigger: 'blur'
          }],
          available_time30: [{
            required: true,
            message: '请输入时间',
            trigger: 'blur'
          }]
        }
      }
    }
  },
  methods: {
    serverInfoChange(msg) {
      this.defaultMsg = msg
    },
    saveForm() {
      this.formFormatData.formData.use_rule = this.defaultMsg
      this.formFormatSubmit({ router: { type: 'replace', path: '/application/envelope', code: 1 } })
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { data: { data: { use_rule } } } = response
        this.defaultMsg = use_rule
      }
    },
    goodsListGrag() {
      this.oldGoodsList = this.formFormatData.formData.recommend_goods.map(v => v.goods_id)
      this.newGoodsList = this.oldGoodsList.slice()
      this.$nextTick(() => {
        this.setSort()
      })
    },
    setSort() {
    //   console.log(document.querySelectorAll('.wlm-form .wlm-form-content.table-content .el-form-item.goods-table-box .el-form-item__content .goods-table'), 'ddf')
      const el = document.querySelectorAll('.wlm-form .wlm-form-content.table-content .el-form-item.goods-table-box .el-form-item__content .goods-table .el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.formFormatData.formData.recommend_goods.splice(evt.oldIndex, 1)[0]
          this.formFormatData.formData.recommend_goods.splice(evt.newIndex, 0, targetRow)
          const tempIndex = this.newGoodsList.splice(evt.oldIndex, 1)[0]
          this.newGoodsList.splice(evt.newIndex, 0, tempIndex)
        }
      })
    },
    filtersChange(val) {
      this.currentRow = val.currentRow
      const displayData = val.displayData
      displayData.map(item => {
        var hasIndex = this.formFormatData.formData.goods.findIndex(tableitem => { return `${tableitem.goods_id}` === `${item.goods_id}` })
        if (hasIndex === -1) {
          this.formFormatData.formData.goods.push({ image: [{ file_path: item.image[0]['file_path'] }], goods_name: item.goods_name, goods_id: item.goods_id, goods_price: item.goods_min_price })
        }
      })
    },
    goodsToogle() {
      const result = []
      this.formFormatData.formData.goods.map(item => {
        result.push(item.goods_id)
      })
      this.$refs.chooseGoods.currentRow = result
      this.$refs.chooseGoods.toggle()
    },
    deleteTable(scope) {
      this.formFormatData.formData.goods.splice(scope.$index, 1)
      this.currentRow.splice(scope.$index, 1)
    },
    vipFiltersChange(val) {
      this.currentRow2 = val.currentRow
      const displayData = val.displayData
      displayData.map(item => {
        var hasIndex = this.formFormatData.formData.recommend_goods.findIndex(tableitem => { return `${tableitem.goods_id}` === `${item.goods_id}` })
        if (hasIndex === -1 && this.formFormatData.formData.recommend_goods.length < 8) {
          this.formFormatData.formData.recommend_goods.push({ image: [{ file_path: item.image[0]['file_path'] }], goods_name: item.goods_name, goods_id: item.goods_id, goods_price: item.goods_min_price })
        }
      })
    },
    vipGoodsToogle() {
      const result = []
      this.formFormatData.formData.recommend_goods.map(item => {
        result.push(item.goods_id)
      })
      this.$refs.chooseVipGoods.currentRow = result
      this.$refs.chooseVipGoods.toggle()
    },
    vipDeleteTable(scope) {
      this.formFormatData.formData.recommend_goods.splice(scope.$index, 1)
      this.currentRow2.splice(scope.$index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.envelope-add {
    .logo {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
    }

    /deep/ .sortable-ghost {
        opacity: .8;
        color: #fff !important;
        background: #79bbff !important;
    }

    /deep/ .envelope-input-number .el-input-number {
        width: 150px;
    }

    /deep/ .envelope-input-number .el-input-number .el-input {
        width: 150px;
    }
}
</style>
